<template>
    <div class="body">
        <Left id="left"></Left>
        <div class="d_body_1">
            <i class="el-icon-edit-outline"></i>
            发表新博客
        </div>
        <!--博客标题-->
        <div class="d_title">
               <!-- <el-select style="width:120px" clearable placeholder="请选择">
                    <el-option label="原创" :value="1"></el-option>
                    <el-option label="翻译" :value="2"></el-option>
                    <el-option label="转载" :value="3"></el-option>
                </el-select>-->
            <el-input style="width: 800px" v-model="title" placeholder="请输入博客标题" clearable></el-input>
        </div>
        <!--富文本-->
        <Ue ref="ue"></Ue>
        <!--文章标签-->
        <div class="d_label">
            <span style="color: #606266">文章标签:</span>

            <el-tag
                    style="margin-left: 5px"
                    type="warning"
                    :key="tag"
                    v-for="tag in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                    style="width: 70px"
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else  size="small" @click="showInput">+ 新增</el-button>
        </div>
        <!--博客分类-->
        <div class="d_radio">
            <span style="color: #606266">文章分类:</span>
            <el-radio-group style="margin-left: 10px" v-model="radio">
                <el-radio v-for="v in category" :label="v.id">{{v.name}}</el-radio>

            </el-radio-group>
        </div>
        <!--按钮部分-->
        <div class="d_button">
            <el-button style="margin-left: 16%;width: 200px" @click="set_blog()" :disabled="is_set_blog" type="primary" >立即发布</el-button>
            <el-button style="margin-left: 50px;width: 200px"type="danger" >返回主页</el-button>
        </div>
        <!--<button @click="get_content()">查看内容</button>-->
    </div>
    
</template>

<script>
    /*引入富文本*/
    import Ue from '../../components/ue/ue'
    //引入统一左边栏
    import Left from '../../components/blog/left'
    /*引入axios*/
    import axios from 'axios'

    export default {
        name: "setblog",
        data() {
            return {
                dynamicTags: ['个人', '抄袭', '翻译'],
                inputVisible: false,
                inputValue: '',
                category:{},
                title:'',
                radio:{},
                is_set:true,
                loginUser:{},
            }
        },
        components: {
            Ue,Left
        },
        computed:{
            is_set_blog(){
                if (this.dynamicTags.length!=0&& this.title.trim().length!=0){
                    return false;
                }
                return true;
            }
        },

        created(){
            //获取登录的用户
            this.loginUser=JSON.parse(sessionStorage.getItem('login_user'));
            //初始化分类（标签）
            let url='https://www.dragonjun.com/boot/blog/get_category';
            let data=null;
            axios.post(url,data,{
                headers:{
                    'Content-Type': 'application/json',
                }
            }).then((data)=>{
                //console.log(data);
                this.category=data.data.data;
                this.radio= this.category[0].id
            }).catch((error)=>{
                console.log(error);
            });
            /*标签*/
             url='https://www.dragonjun.com/boot/blog/get_label';
             data=null;
            axios.post(url,data,{
                headers:{
                    'Content-Type': 'application/json',
                }
            }).then((data)=>{
                //console.log(data);
                this.dynamicTags=data.data.data;
            }).catch((error)=>{
                console.log(error);
            })
        },
        methods:{
            //定义弹窗（成功）
            open_success(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            //错误
            open_error(msg) {
                this.$message.error(msg);
            },
            //发表博文
            set_blog(){
                if(this.$refs.ue.editorContent.trim().length===0){
                   this.open_error('博客内容为空');
                   return;
                }
                //提交数据
                let url='https://www.dragonjun.com/boot/blog/add_blog';
                //let url='http://localhost:8080/blog/add_blog';
                let data=JSON.stringify({"userId":this.loginUser.id,"content":this.$refs.ue.editorContent,
                "category":this.radio,"label":this.dynamicTags,"text":this.$refs.ue.editorContent_txt,
                "title":this.title});
                axios.post(url,data,{
                    headers:{
                        'Content-Type': 'application/json',
                    }
                }).then((data)=>{
                    //console.log(data);
                    if(data.data.code==1){
                        this.open_success(data.data.desc);
                        //清空参数
                        this.title='';
                    }
                }).catch((error)=>{
                    console.log(error);
                })


            },
            get_content(){
                //this.$refs.ue.getContent();
                console.log(this.$refs.ue.getContent())
            },

            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    //此处自主修改！判断有没有相同的标签存在了
                   /* console.log("当前标签的储值",this.dynamicTags);
                    console.log("判断是否有值",this.dynamicTags.indexOf(inputValue)!=-1);*/
                    if(this.dynamicTags.indexOf(inputValue)!=-1) {
                        //存在
                        this.open_error('此标签已经添加');
                        return;
                    }
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        }

    }
</script>

<style scoped>

    .body{
        //border: 1px solid red;
        height: auto;
        width: 1300px;
        margin: 3% auto;
        //box-shadow: 0 0 2px #666666;
        border-radius: 5px;
        padding-bottom: 30px;
        padding-top: 30px;

    }
    .d_body_1{
        width: 200px;
        font-size: 30px;
        margin: 0px auto;
    }
    .d_title{
        width: 800px;
        margin: 30px auto;
        margin-top: 6%;
    }
    .d_label{
        width: 800px;
        margin:30px auto;
    }
    .d_radio{
        width: 800px;
        margin:30px auto;
    }
    .d_button{
        width: 800px;
        margin:30px auto;
        margin-top: 5%;
    }
    #left{
        float: left;
        margin-top: 80px;
        margin-left: 10px;

    }
    >>>.left ul li:first-child{
        background: #C92027;
        color: white;
        transform: translate(10px,0px);
    }


</style>